<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
</head>
<body style="margin: 10px">
<!--查询条件开始-->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">登陆名</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入登陆名" name="username" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入真实姓名" name="realname" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">在职状态</label>
                <div class="layui-input-inline">
                    <input type="radio" value="1" name="deleted" title="在职" >
                    <input type="radio" value="2" name="deleted" title="离职" >
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-danger">重置</button>
            </div>
        </div>
    </form>
</blockquote>
<!--查询条件结束-->

<!--数据表格开始-->
<div>
    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
    <script type="text/html" id="userTableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
    </script>
    <script type="text/html" id="userTableRowBar">
        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">离职</a>
        <a class="layui-btn layui-btn-xs" lay-event="resetPwd">重置密码</a>
    </script>
</div>
<!--数据表格结束-->
<!--添加修改弹出层开始-->
<div id="addOrUpdateDiv" style="display: none;margin: 8px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">登陆名</label>
            <div class="layui-input-block">
                <!--修改时要提交一个ID到后台-->
                <input type="hidden" name="id">
                <input type="text" name="username" placeholder="请输入登陆名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实名称</label>
            <div class="layui-input-block">
                <input type="text" name="realname" placeholder="请输入真实名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="radio" value="1" name="role" title="管理员" >
                <input type="radio" value="2" name="role" title="业务员" checked >
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">保存</button>
            <button type="reset" class="layui-btn layui-btn-danger">重置</button>
        </div>
    </form>
</div>
<!--添加修改弹出层结束-->


</body>
<script src="${ctx}/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${ctx}/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script>
    layui.use(['form','layer','table','jquery'],function () {
        let form=layui.form;
        let table=layui.table;
        let layer=layui.layer;
        let $=layui.jquery;
        //渲染数据表格
        let userTable= table.render({
            elem: '#userTable'
            ,url:'${ctx}/user/query.action'
            ,toolbar: '#userTableToolbar' //开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表' //excel导出的文件名
            ,height:'full-200'
            ,cols: [[
                {field:'id', title:'ID',align:"center"}
                ,{field:'username', title:'登陆名',align:"center"}
                ,{field:'realname', title:'真实名',align:"center"}
                ,{field:'role', title:'角色',align:"center",templet:function (d) {
                        let str="";
                        if(d.role==1){
                            str="<font color='blue' >管理员</font>"
                        }else  if(d.role==2){
                            str="<font color='purple' >业务员</font>"
                        }
                        return str;
                    }}
                ,{field:'deleted', title:'在职状态',align:"center",templet:function (d) {
                        let str="";
                        if(d.deleted==1){
                            str="<font color='blue' >在职</font>"
                        }else  if(d.deleted==2){
                            str="<font color='red' >离职</font>"
                        }
                        return str;
                    }}
                ,{field:'createTime', title:'创建时间',align:"center"}
                ,{field:'updateTime', title:'更新时间',align:"center"}
                ,{field:'deletedTime', title:'离职时间',align:"center"}
                ,{fixed: 'right', title:'操作',align:"center", toolbar: '#userTableRowBar', width:249}
            ]]
            ,page: true
        });

        //监听查询按钮的点击
        form.on("submit(doSearch)",function (data) {
            let params=data.field;
            console.log(params);
            userTable.reload({
                //每次模糊查询 都回到第一页
                page:{
                    curr:1
                },
                //查询条件
                where:params
            })
        })
        //
        //头工具栏事件
        table.on('toolbar(userTable)', function(obj){
            switch(obj.event){
                case "add":
                    openAddUserLayer();
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                doDelete(data);
            } else if(obj.event === 'update'){
                openUpdateUserLayer(data);
            }else if (obj.event === 'resetPwd'){
                resetPwd(data);
            }
        });
        //声明一个全局的url
        let url="";
        //声明一个存放弹出层索引的变量
        let index=0;
        //打开添加的弹出层
        function openAddUserLayer() {
            index=layer.open({
                type:1,
                content: $("#addOrUpdateDiv"),
                area:['500','300'],
                title:"添加用户",
                success:function () {
                    //重置表单
                    $("#dataFrm")[0].reset()
                    //赋值url
                    url="${ctx}/user/add.action";
                }
            })
        }
        //打开修改的弹出层
        function openUpdateUserLayer(data) {
            index=layer.open({
                type:1,
                content: $("#addOrUpdateDiv"),
                area:['500','300'],
                title:"修改【"+data.realname+"】用户",
                success:function () {
                    //把当前行的数据填入表单
                    form.val('dataFrm',data);
                    //赋值url
                    url="${ctx}/user/update.action";
                }
            })
        }

        function doDelete(data){
            layer.confirm('确定'+data.realname+'离职？',function (index){
                $.post("${ctx}/user/del.action",{id:data.id},function (res){
                    if (res.code=200){
                        layer.msg(res.msg);
                        layer.close(index);
                        //刷新表格
                        userTable.reload();
                    }else{
                        layer.msg(res.msg);
                    }
                })
            });
        }

        //重置密码
        function resetPwd(data){
            layer.confirm('确定要重置'+data.realname+'密码？',function (index){
                $.post("${ctx}/user/resetPwd.action",{id:data.id},function (res){
                    if (res.code=200){
                        layer.msg(res.msg);
                        layer.close(index);
                    }else{
                        layer.msg(res.msg);
                    }
                })
            });
        }

        //监听表单保存按钮的点击
        form.on("submit(doSubmit)",function (data) {
            let params=data.field;
            //发送请求
            $.post(url,params,function (res) {
                if(res.code==200){
                    layer.msg(res.msg);
                    //刷新表格
                    userTable.reload();
                    //关闭弹出层
                    layer.close(index)
                }else{
                    layer.msg(res.msg);
                }
            })

        })
    })
</script>
</html>